<script setup lang="ts">
import { ref, watch } from 'vue'
import { WeatherSunny16Regular, WeatherMoon16Regular } from '@vicons/fluent'
import { storeToRefs } from 'pinia'
import { useGlobalStore } from '@/stores/global'

// 全局存储
const globalStore = useGlobalStore()
const { isDarkTheme } = storeToRefs(globalStore)

// 暗黑模式
const isDarkMode = ref(isDarkTheme.value)

// 监听：暗黑主题
watch(isDarkMode, (value) => {
  globalStore.setDarkTheme(value)
})
</script>

<template>
  <n-switch
    v-model:value="isDarkMode"
    :rail-style="
      () => ({
        backgroundColor: 'var(--n-rail-color)',
      })
    "
  >
    <template #checked-icon>
      <n-icon :component="WeatherMoon16Regular" />
    </template>
    <template #unchecked-icon>
      <n-icon :component="WeatherSunny16Regular" />
    </template>
  </n-switch>
</template>

<style lang="scss" scoped></style>
